<script setup>
import { ref, onMounted } from "vue";
import api from "@/api/api.js";
import { useUserStore } from "@/stores/user.store";
import { storeToRefs } from "pinia";
import { useRouter } from "vue-router";

const router = useRouter();

const year_selected = ref("");
const year_select = ref("");
const showPicker = ref(false);
const columns = [
  { text: "2025年度", value: "2025" },
  { text: "2024年度", value: "2024" },
];

const { userData } = storeToRefs(useUserStore());

const onConfirm = ({ selectedOptions }) => {
  year_selected.value = selectedOptions[0]?.value;
  year_select.value = selectedOptions[0]?.text;
  pageNum.value = 1;
  record_list.value = [];
  onLoad();
  showPicker.value = false;
};

//缴费记录列表
const record_list = ref([]);
const total = ref(0); //返回的数据总条数
const pageNum = ref(1);
const loading = ref(false);
const finished = ref(false);

const get_PayRecord = async () => {
  let params = {
    year: year_selected.value,
    pageNum: pageNum.value, // 使用动态的 pageNum
    pageSize: 10,
  };
  try {
    const res = await api.getPayRecord(params);
    if (res.data.length === 0) finished.value = true;
    record_list.value = res.data; // 追加数据
    total.value = res.total;
  } catch (error) {
    console.log(error);
  }
};

const onLoad = async () => {
  // 异步更新数据
  await get_PayRecord();
  // 加载状态结束
  loading.value = false;

  // 数据全部加载完成
  if (record_list.value.length >= total.value) {
    finished.value = true;
  }
  pageNum.value++; // 分页递增
};

//跳转去客服
const toContact = () => {
  router.push({ path: "/contact" });
};

//跳转去我的报名
const toMyEnrollList = () => {
  router.push({ path: "/my_enroll_detail" });
}

onMounted(async () => {
  year_select.value = columns[0].text;
  year_selected.value = columns[0].value;
  await get_PayRecord();
});
</script>
<template>
  <div class="my-container">
    <div class="bg-container">
      <div class="info-box">
        <div class="avatar">
          <img src="@/assets/icons/avatar.png" alt="" />
        </div>
        <div class="info">
          <p>姓名：{{ userData.name }}</p>
          <p>手机号：{{ userData.phone }}</p>
        </div>
      </div>
    </div>
    <div class="fn-box">
      <div class="left" @click="toContact">
        <img src="@/assets/icons/lxkf.png" alt="" />
        <p>联系客服</p>
      </div>
      <div class="right" @click="toMyEnrollList">
        <img src="@/assets/icons/wdbm.png" alt="" />
        <p>我的报名</p>
      </div>
    </div>

    <div class="record-container">
      <header>
        <p>我的缴费记录</p>
        <van-field v-model="year_select" is-link readonly name="picker" @click="showPicker = true" style="width: 100px"
          arrow-direction="down" />
        <van-popup v-model:show="showPicker" position="bottom">
          <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
        </van-popup>
      </header>
      <main>
        <van-list class="record_box" v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div class="record_item" v-for="item in record_list" :key="item.id">
            <van-cell class="first" title="活动名称">{{ item.title }}</van-cell>
            <van-cell title="订单编号">{{ item.orderNo }}</van-cell>
            <van-cell title="姓名">{{ item.name }}</van-cell>
            <van-cell title="证件号">{{ item.cardno }}</van-cell>
            <van-cell title="缴费金额">{{ item.payAmount }}元</van-cell>
            <van-cell class="last" title="缴费时间">{{
              item.createTime
            }}
            </van-cell>
          </div>
        </van-list>
      </main>
    </div>
  </div>
</template>
<style lang="less" scoped>
@import url("../../styles/my/my");
</style>